<script setup lang="tsx">
import { ref, nextTick, onMounted, onBeforeUnmount } from "vue";
import vChart from "@/views/monitor/server/components/VChart.vue";
import {
  ArrowRight,
  Plus,
  Search,
  FullScreen,
  Close,
  DArrowRight,
  DArrowLeft,
  ArrowLeft
} from "@element-plus/icons-vue";
import { useChartAndTableHook } from "./chartAndTableHook";
import { setDataHook } from "./setDataHook";
import { useCalendarHook } from "@/views/CollaborativeInteractiveRresponse/dayBeforeCooperateWith/calendarHook";

const {
  selValue,
  calenderTitle,
  pervYearClick,
  pervMonthClick,
  nextYearClick,
  nextMonthClick,
  calendar,
  selectDate,
  setActiveDay,
  showDateItemCell,
  showDateItemCellBottom,
  vppList,
  vppUserList,
  activeVppAndUser,
  handleChange,
  topRightData,
  showBz,
  showTj,
  showYh,
  loading,
  getMonthDataShowCalener,
  topRightDataTwo,
  terminalList,
  tSearch,
  jterminalList,
  search,
  centerData,
  formatType,
  setActiveCardLine,
  errData,
  activeData,
  formatType2,
  tjtimeFormat
} = useCalendarHook();
const activeName = ref("first");

const formSize = ref("default");
const data = ref(
  new Array(20).fill({
    id: 1,
    "0": "AA场馆有限公司",
    "1": "C440300000200D01",
    "2": "AA场馆有限公司",
    "3": "",
    "4": "自动",
    "5": "100KW",
    "6": "2024-09-03 10:48:48",
    "7": "",
    "8": "vppm01"
  })
);
const chartShow = ref(true);
const chart = ref(null);
onMounted(() => {});

const whole2 = ref(false);
const fullscreen = ref(false);
const setFullscreen = () => {
  fullscreen.value = !fullscreen.value;
  chartShow.value = false;
  setTimeout(() => {
    chartShow.value = true;
    nextTick(() => {
      chart.value.reseize();
    });
  }, 300);
};

const handleClose2 = () => {
  cancel2();
};

const showWhole2 = () => {
  whole2.value = true;
};
const {
  options,
  whole,
  showWhole,
  ruleFormRef,
  ruleForm,
  rules,
  cancel,
  submit,
  handleClose,
  options2
} = useChartAndTableHook(selValue, getMonthDataShowCalener, activeVppAndUser);
const legendselectchanged = ({ e, chart }) => {
  if (e.name === "响应能力") {
    chart.dispatchAction({
      type: "legendToggleSelect",
      name: "响应能力下限"
    });
  }
};
const legendselectchanged2 = ({ e, chart }) => {
  if (e.name === "响应能力") {
    chart.dispatchAction({
      type: "legendToggleSelect",
      name: "响应能力下限"
    });
  }
};

const ruleFormRef2 = ref(null);

const ruleForm2 = ref({
  name: undefined,
  region: undefined,
  start: undefined,
  end: undefined,
  target: undefined,
  type: []
});

const rules2 = ref({
  name: [
    { required: true, message: "请输入描述", trigger: "blur" },
    { min: 3, max: 50, message: "长度在3-50个字符之间", trigger: "blur" }
  ],
  region: [
    {
      required: true,
      message: "请选择投退状态",
      trigger: "change"
    }
  ],
  start: [
    {
      required: true,
      message: "请选择执行开始时间",
      trigger: "change"
    }
  ],
  end: [
    {
      required: true,
      message: "请选择执行结束时间",
      trigger: "change"
    }
  ],
  target: [
    { required: true, message: "请输入目标功率", trigger: "blur" },
    {
      validator: (rule: any, value: any, callback: any) => {
        let reg = /^-?\d+(.\d{1})?$/;
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的数字!"));
        }
      },
      trigger: "blur"
    }
  ]
});

const cancel2 = () => {
  ruleFormRef2.value.resetFields();
  ruleFormRef2.value.clearValidate();
  whole2.value = false;
};

const submit2 = () => {
  ruleFormRef2.value.validate(valid => {
    if (valid) {
      cancel2();
    }
  });
};
const cfData = ref([{ "1": "AAA场馆有限公司" }]);
const whole3 = ref(false);
const showWhole3 = () => {
  whole3.value = true;
};
const cancel3 = () => {
  whole3.value = false;
};
const submit3 = () => {};

const {
  setShow,
  setData,
  handleCloseSetData,
  chartOptions,
  setDataForm,
  setDataFormRules,
  setValue,
  setFormRef,
  cancelSet,
  submitSet,
  submitData,
  jisuan
} = setDataHook(selValue, getMonthDataShowCalener, activeVppAndUser);
</script>

<template>
  <div v-loading="loading" class="w-full h-full flex flex-col">
    <!-- 编制数据 -->
    <el-dialog
      v-model="setShow"
      width="80%"
      :fullscreen="fullscreen"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <template #header>
        <div class="w-full h-[50px] relative flex items-center">
          <div class="text-[18px]">编制信息</div>
          <div
            class="absolute right-10 top-0 cursor-pointer"
            @click="setFullscreen"
          >
            <el-icon><FullScreen /></el-icon>
          </div>
          <div
            class="absolute right-0 top-0 cursor-pointer"
            @click="handleCloseSetData"
          >
            <el-icon><Close /></el-icon>
          </div>
        </div>
      </template>
      <div class="w-full h-full flex flex-col">
        <div
          ref="chartBox"
          class="w-full mb-[20px]"
          :class="{ 'h-[400px]': !fullscreen, 'h-[800px]': fullscreen }"
        >
          <vChart
            v-if="chartShow && setShow"
            ref="chart"
            :options="chartOptions"
            @legendselectchanged="legendselectchanged"
          />
        </div>
        <div class="form w-full">
          <el-form
            ref="setFormRef"
            :model="setDataForm"
            :rules="setDataFormRules"
            label-width="0"
            class="demo-ruleForm"
            :size="formSize"
          >
            <el-table :data="setDataForm" height="400px">
              <el-table-column align="center" prop="0" label="时刻" />
              <el-table-column align="center" prop="1" label="值">
                <template #default="scope">
                  <div>
                    <el-form-item label="" :prop="`${scope.$index}.1`">
                      <el-input
                        v-model="scope.row[1]"
                        @blur="e => setValue(e, scope.$index, 1)"
                      />
                    </el-form-item>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="2" label="时刻" />
              <el-table-column align="center" prop="3" label="值">
                <template #default="scope">
                  <div>
                    <el-form-item label="" :prop="`${scope.$index}.3`">
                      <el-input
                        v-model="scope.row[3]"
                        @blur="e => setValue(e, scope.$index, 3)"
                      />
                    </el-form-item>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="4" label="时刻" />
              <el-table-column align="center" prop="5" label="值">
                <template #default="scope">
                  <div>
                    <el-form-item label="" :prop="`${scope.$index}.5`">
                      <el-input
                        v-model="scope.row[5]"
                        @blur="e => setValue(e, scope.$index, 5)"
                      />
                    </el-form-item>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="6" label="时刻" />
              <el-table-column align="center" prop="7" label="值">
                <template #default="scope">
                  <div>
                    <el-form-item label="" :prop="`${scope.$index}.7`">
                      <el-input
                        v-model="scope.row[7]"
                        @blur="e => setValue(e, scope.$index, 7)"
                      />
                    </el-form-item>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="8" label="时刻" />
              <el-table-column align="center" prop="9" label="值">
                <template #default="scope">
                  <div>
                    <el-form-item label="" :prop="`${scope.$index}.9`">
                      <el-input
                        v-model="scope.row[9]"
                        @blur="e => setValue(e, scope.$index, 9)"
                      />
                    </el-form-item>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="10" label="时刻" />
              <el-table-column align="center" prop="11" label="值">
                <template #default="scope">
                  <div>
                    <el-form-item label="" :prop="`${scope.$index}.11`">
                      <el-input
                        v-model="scope.row[11]"
                        @blur="e => setValue(e, scope.$index, 11)"
                      />
                    </el-form-item>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="12" label="时刻" />
              <el-table-column align="center" prop="13" label="值">
                <template #default="scope">
                  <div>
                    <el-form-item label="" :prop="`${scope.$index}.13`">
                      <el-input
                        v-model="scope.row[13]"
                        @blur="e => setValue(e, scope.$index, 13)"
                      />
                    </el-form-item>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="14" label="时刻" />
              <el-table-column align="center" prop="15" label="值">
                <template #default="scope">
                  <div>
                    <el-form-item label="" :prop="`${scope.$index}.15`">
                      <el-input
                        v-model="scope.row[15]"
                        @blur="e => setValue(e, scope.$index, 15)"
                      />
                    </el-form-item>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelSet">取消</el-button>
          <el-button type="primary" @click="submitSet"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 重发协同指令 -->
    <el-dialog
      v-model="whole3"
      title="重发协同指令"
      width="40%"
      :close-on-click-modal="false"
    >
      <div class="w-full">
        <el-table :data="cfData" height="400px">
          <el-table-column label="资源名称" prop="1" />
          <el-table-column label="所属企业" prop="1" />
          <el-table-column label="调控/协调" prop="1" />
          <el-table-column label="协同指令状态" prop="1" />
        </el-table>
        <div class="mt-[20px]">
          <el-form
            ref="ruleFormRef3"
            :model="ruleForm2"
            :rules="rules2"
            label-width=""
            class="demo-ruleForm"
            :size="formSize"
            status-icon
          >
            <el-form-item label="推送港式" prop="target">
              <el-checkbox-group v-model="ruleForm2.type">
                <el-checkbox label="APP" name="type" value="1" />
                <el-checkbox label="边缘计算网关" name="type" value="2" />
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel3">取消</el-button>
          <el-button type="primary" @click="submit3"> 重发 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 调控计划预览 -->
    <el-dialog
      v-model="whole"
      width="50%"
      :fullscreen="fullscreen"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <template #header>
        <div class="w-full h-[50px] relative flex items-center">
          <div class="text-[18px]">调控计划预览</div>
          <div
            class="absolute right-10 top-0 cursor-pointer"
            @click="setFullscreen"
          >
            <el-icon><FullScreen /></el-icon>
          </div>
          <div
            class="absolute right-0 top-0 cursor-pointer"
            @click="handleClose"
          >
            <el-icon><Close /></el-icon>
          </div>
        </div>
      </template>
      <div class="w-full h-full flex flex-col">
        <div
          ref="chartBox"
          class="w-full mb-[20px]"
          :class="{ 'h-[400px]': !fullscreen, 'h-[800px]': fullscreen }"
        >
          <vChart
            v-if="chartShow && whole"
            ref="chart"
            :options="options"
            @legendselectchanged="legendselectchanged"
          />
        </div>
        <div v-if="false" class="form w-full">
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            :size="formSize"
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="协同指令描述" prop="name">
                  <el-input v-model="ruleForm.name" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="投退状态" prop="region">
                  <el-select v-model="ruleForm.region" placeholder="投退状态">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="执行开始时间" prop="start">
                  <el-date-picker
                    v-model="ruleForm.start"
                    type="datetime"
                    placeholder="执行开始时间"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="执行结束时间" prop="end">
                  <el-date-picker
                    v-model="ruleForm.end"
                    type="datetime"
                    placeholder="执行结束时间"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="目标功率" prop="target">
                  <el-input
                    v-model="ruleForm.target"
                    style="width: 100%"
                    :controls="false"
                  >
                    <template #append>千瓦</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">关闭</el-button>
          <!--          <el-button type="primary" @click="submit"> 分解下发 </el-button>-->
        </span>
      </template>
    </el-dialog>
    <el-dialog
      v-model="whole2"
      width="50%"
      :fullscreen="fullscreen"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <template #header>
        <div class="w-full h-[50px] relative flex items-center">
          <div class="text-[18px]">实时协同指令</div>
          <div
            class="absolute right-10 top-0 cursor-pointer"
            @click="setFullscreen"
          >
            <el-icon><FullScreen /></el-icon>
          </div>
          <div
            class="absolute right-0 top-0 cursor-pointer"
            @click="handleClose2"
          >
            <el-icon><Close /></el-icon>
          </div>
        </div>
      </template>
      <div class="w-full h-full flex flex-col">
        <div
          ref="chartBox"
          class="w-full mb-[20px]"
          :class="{ 'h-[400px]': !fullscreen, 'h-[800px]': fullscreen }"
        >
          <vChart
            v-if="chartShow && whole2"
            ref="chart"
            :options="options2"
            @legendselectchanged="legendselectchanged2"
          />
        </div>
        <div class="form w-full">
          <el-form
            ref="ruleFormRef2"
            :model="ruleForm2"
            :rules="rules2"
            label-width="120px"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="资源编号" prop="name">
                  <el-input v-model="ruleForm2.name" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="资源名称" prop="name">
                  <el-input v-model="ruleForm2.name" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="调控" prop="region">
                  <el-select v-model="ruleForm2.region" placeholder="投退状态">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="调节目标" prop="target">
                  <el-input
                    v-model="ruleForm2.target"
                    style="width: 100%"
                    :controls="false"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="调节上限" prop="target">
                  <el-input
                    v-model="ruleForm2.target"
                    style="width: 100%"
                    :controls="false"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="调节下限" prop="target">
                  <el-input
                    v-model="ruleForm2.target"
                    style="width: 100%"
                    :controls="false"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="调控方式" prop="region">
                  <el-select v-model="ruleForm2.region" placeholder="投退状态">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="投退状态" prop="region">
                  <el-select v-model="ruleForm2.region" placeholder="投退状态">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="调控开始时间" prop="start">
                  <el-date-picker
                    v-model="ruleForm2.start"
                    type="datetime"
                    placeholder="执行开始时间"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="调控结束时间" prop="end">
                  <el-date-picker
                    v-model="ruleForm2.end"
                    type="datetime"
                    placeholder="执行结束时间"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="分钟级推送" prop="target">
                  <el-radio-group v-model="ruleForm2.resource">
                    <el-radio label="是" />
                    <el-radio label="否" />
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="推送港式" prop="target">
                  <el-checkbox-group v-model="ruleForm2.type">
                    <el-checkbox label="APP" name="type" value="1" />
                    <el-checkbox label="边缘计算网关" name="type" value="2" />
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel2">取消</el-button>
          <el-button type="primary" @click="submit2"> 分解下发 </el-button>
        </span>
      </template>
    </el-dialog>
    <div class="w-full flex mb-[20px]">
      <div class="rl w-1/3 pr-[20px]">
        <el-card>
          <el-calendar ref="calendar">
            <template #header>
              <div class="flex w-full">
                <div class="w-[40%]">
                  <!--                  <el-select v-model="activeVppId" placeholder="请选择虚拟电厂">-->
                  <!--                    <el-option-->
                  <!--                      v-for="item in vppList"-->
                  <!--                      :key="item.id"-->
                  <!--                      :value="item.id"-->
                  <!--                      :label="item.name"-->
                  <!--                    />-->
                  <!--                  </el-select>-->
                  <el-cascader
                    v-model="activeVppAndUser"
                    :options="vppList"
                    :props="{
                      value: 'id',
                      label: 'name',
                      children: 'vppUserResponse'
                    }"
                    @change="handleChange"
                  />
                </div>
                <div class="flex w-[60%] h-[40px] justify-around items-center">
                  <div
                    :class="{
                      'cursor-not-allowed': !pervYearClick,
                      'cursor-pointer': pervYearClick
                    }"
                    @click="selectDate('prev-year')"
                  >
                    <el-icon size="20"><DArrowLeft /></el-icon>
                  </div>
                  <div
                    :class="{
                      'cursor-not-allowed': !pervMonthClick,
                      'cursor-pointer': pervMonthClick
                    }"
                    @click="selectDate('prev-month')"
                  >
                    <el-icon size="22"><ArrowLeft /></el-icon>
                  </div>
                  <div class="text-[22px] font-bold">{{ calenderTitle }}</div>
                  <div
                    :class="{
                      'cursor-not-allowed': !nextMonthClick,
                      'cursor-pointer': nextMonthClick
                    }"
                    @click="selectDate('next-month')"
                  >
                    <el-icon size="22"><ArrowRight /></el-icon>
                  </div>
                  <div
                    :class="{
                      'cursor-not-allowed': !nextYearClick,
                      'cursor-pointer': nextYearClick
                    }"
                    @click="selectDate('next-year')"
                  >
                    <el-icon size="20"><DArrowRight /></el-icon>
                  </div>
                </div>
              </div>
            </template>
            <template #date-cell="{ data }">
              <div
                class="w-full h-full flex-col flex justify-center items-center"
                :class="{ 'bg-[#27a2a2]': data.day === selValue }"
                @click.stop="setActiveDay(data)"
              >
                <div>{{ showDateItemCell(data) }}</div>
                <div>{{ showDateItemCellBottom(data) }}</div>
              </div>
            </template>
          </el-calendar>
        </el-card>
      </div>
      <div class="w-2/3 flex flex-col">
        <div class="h-1/3">
          <el-card class="m-card w-full h-full">
            <div class="w-full h-full flex items-center justify-around">
              <div class="item flex items-center">
                <div class="img-l w-[80px] h-[80px] mr-[20px]">
                  <div
                    class="w-full h-full rounded-full bg-[#dde2f7] flex justify-center items-center"
                  >
                    <div
                      class="w-[90%] h-[90%] rounded-full bg-[#5575db] justify-center items-center flex"
                    >
                      <IconifyIconOnline
                        icon="tdesign:user"
                        color="#fff"
                        width="40"
                      />
                    </div>
                  </div>
                </div>
                <div class="flex flex-col">
                  <div class="flex items-end mb-[12px]">
                    <div class="text-[24px] font-bold">
                      {{ topRightData.planMileage }}
                    </div>
                    <div class="text-[16px]">kWh</div>
                  </div>
                  <div class="text-[16px]">计划里程</div>
                </div>
              </div>
              <div
                class="item-line w-[1px] h-[100px] dark:bg-[#4bc4d6] bg-gray-400"
              />
              <div class="item flex items-center">
                <div class="img-l w-[80px] h-[80px] mr-[20px]">
                  <div
                    class="w-full h-full rounded-full bg-[#dde2f7] flex justify-center items-center"
                  >
                    <div
                      class="w-[90%] h-[90%] rounded-full bg-[#35b3ed] justify-center items-center flex"
                    >
                      <IconifyIconOnline
                        icon="clarity:flame-line"
                        color="#fff"
                        width="40"
                      />
                    </div>
                  </div>
                </div>
                <div class="flex flex-col">
                  <div class="flex items-end mb-[12px]">
                    <div class="text-[24px] font-bold">
                      {{ topRightData.planUser }}
                    </div>
                    <div class="text-[16px]">家</div>
                  </div>
                  <div class="text-[16px]">计划用户</div>
                </div>
              </div>
              <div
                class="item-line w-[1px] h-[100px] dark:bg-[#4bc4d6] bg-gray-400"
              />
              <div class="item flex items-center">
                <div class="img-l w-[80px] h-[80px] mr-[20px]">
                  <div
                    class="w-full h-full rounded-full bg-[#dde2f7] flex justify-center items-center"
                  >
                    <div
                      class="w-[90%] h-[90%] rounded-full bg-[#5085fc] justify-center items-center flex"
                    >
                      <IconifyIconOnline
                        icon="fluent:battery-8-28-regular"
                        color="#fff"
                        width="40"
                      />
                    </div>
                  </div>
                </div>
                <div class="flex flex-col">
                  <div class="flex items-end mb-[12px]">
                    <div class="text-[24px] font-bold">
                      {{ topRightData.confirmUser }}
                    </div>
                    <div class="text-[16px]">家</div>
                  </div>
                  <div class="text-[16px]">确认用户</div>
                </div>
              </div>
              <div
                class="item-line w-[1px] h-[100px] dark:bg-[#4bc4d6] bg-gray-400"
              />
              <div class="item flex items-center">
                <div class="img-l w-[80px] h-[80px] mr-[20px]">
                  <div
                    class="w-full h-full rounded-full bg-[#dde2f7] flex justify-center items-center"
                  >
                    <div
                      class="w-[90%] h-[90%] rounded-full bg-[#35b3ed] justify-center items-center flex"
                    >
                      <IconifyIconOnline
                        icon="teenyicons:calendar-plus-outline"
                        color="#fff"
                        width="40"
                      />
                    </div>
                  </div>
                </div>
                <div class="flex flex-col">
                  <div class="flex items-end mb-[12px]">
                    <div class="text-[24px] font-bold">
                      {{ topRightData.confirmMileage }}
                    </div>
                    <div class="text-[16px]">kWh</div>
                  </div>
                  <div class="text-[16px]">确认里程</div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
        <div class="flex-1 pt-[20px]">
          <el-card class="m-card w-full h-full">
            <div class="w-full h-full flex flex-col">
              <div class="flex justify-center items-center w-full relative">
                <div class="text-[24px] font-bold">
                  {{ selValue }} 计划协同调节性能
                </div>
                <div class="absolute right-0 top-0 flex items-center">
                  <div
                    v-if="showBz"
                    class="my-btn jb my-shadow text-white mr-5"
                    @click="setData"
                  >
                    编制
                  </div>
                  <div
                    v-if="showYh"
                    class="my-btn text-[#7f98f8] my-shadow mr-5"
                    @click="jisuan"
                  >
                    优化计算
                  </div>
                  <div
                    v-if="showTj"
                    class="my-btn text-[#7f98f8] my-shadow"
                    @click="submitData"
                  >
                    提交
                  </div>
                </div>
              </div>
              <div class="flex-1 flex w-full">
                <div class="flex-1 flex flex-wrap justify-between">
                  <div class="flex-shrink-0 w-[50%] tj-item flex items-center">
                    <div
                      class="icon-box w-[80px] h-[80px] bg-[#1296db] rounded-full flex justify-center items-center"
                    >
                      <IconifyIconOnline
                        icon="tabler:math-max"
                        color="#fff"
                        width="40"
                      />
                    </div>
                    <div class="title-box ml-3">
                      <div class="flex items-center mb-[2px]">
                        <div class="text-[24px] mr-1">
                          {{ topRightDataTwo.maxAdjustablePower || "--" }}
                        </div>
                        <div class="text-[16px]">kW</div>
                      </div>
                      <div class="text-[16px]">最大可调功率</div>
                    </div>
                  </div>
                  <div class="flex-shrink-0 w-[50%] tj-item flex items-center">
                    <div
                      class="icon-box w-[80px] h-[80px] rounded-full bg-[#5085fc] justify-center items-center flex"
                    >
                      <IconifyIconOnline
                        icon="streamline:graph-bar-increase"
                        color="#fff"
                        width="40"
                      />
                    </div>
                    <div class="title-box ml-3">
                      <div class="flex items-center mb-[2px]">
                        <div class="text-[24px] mr-1">
                          {{ topRightDataTwo.maxUpPegulationRate || "--" }}
                        </div>
                        <div class="text-[16px]">kW/min</div>
                      </div>
                      <div class="text-[16px]">最大上调速率</div>
                    </div>
                  </div>
                  <div class="flex-shrink-0 w-[50%] tj-item flex items-center">
                    <div
                      class="icon-box w-[80px] h-[80px] bg-[#1afa29] rounded-full flex justify-center items-center"
                    >
                      <IconifyIconOnline
                        icon="icon-park-outline:electrocardiogram"
                        color="#fff"
                        width="40"
                      />
                    </div>
                    <div class="title-box ml-3">
                      <div class="flex items-center mb-[2px]">
                        <div class="text-[24px] mr-1">
                          {{ topRightDataTwo.maxAdjustableStep || "--" }}
                        </div>
                        <div class="text-[16px]">kW</div>
                      </div>
                      <!--                      <div class="text-[16px]">基准可调功率</div>-->
                      <div class="text-[16px]">最大调节步长</div>
                    </div>
                  </div>
                  <div class="flex-shrink-0 w-[50%] tj-item flex items-center">
                    <div
                      class="icon-box w-[80px] h-[80px] rounded-full bg-[#35b3ed] flex justify-center items-center"
                    >
                      <IconifyIconOnline
                        icon="streamline:graph-bar-decrease"
                        color="#fff"
                        width="40"
                      />
                    </div>
                    <div class="title-box ml-3">
                      <div class="flex items-center mb-[2px]">
                        <div class="text-[24px] mr-1">
                          {{ topRightDataTwo.maxDownPegulationRate || "--" }}
                        </div>
                        <div class="text-[16px]">kW/min</div>
                      </div>
                      <div class="text-[16px]">最大下调速率</div>
                    </div>
                  </div>
                </div>
                <div class="flex-1 flex flex-col justify-center pr-8">
                  <div
                    class="flex items-center py-3 border-bottom-f6 dark:border-[#fff]"
                  >
                    <div class="text-[18px] w-[50%]">
                      调节总时长：{{
                        topRightDataTwo.adjustmentDuration
                          ? tjtimeFormat(topRightDataTwo.adjustmentDuration)
                          : "--"
                      }}
                    </div>
                    <!--                    <div class="text-[18px] w-[30%]">1小时</div>-->
                    <div class="flex items-center w-[50%]">
                      <!--                      <div class="text-[24px] mr-1">调节频率：</div>-->
                      <div class="text-[24px] mr-1">调节峰值：</div>
                      <div class="text-[24px]">
                        {{
                          topRightDataTwo.adjustThePeak
                            ? topRightDataTwo.adjustThePeak + "min"
                            : "--"
                        }}
                      </div>
                    </div>
                  </div>
                  <div
                    class="flex items-center py-3 border-bottom-f6 dark:border-[#fff]"
                  >
                    <div class="text-[18px] w-[50%]">
                      调节最长时段：{{
                        topRightDataTwo.maxAdjustmentDuration
                          ? tjtimeFormat(topRightDataTwo.maxAdjustmentDuration)
                          : "--"
                      }}
                    </div>
                    <!--                    <div class="text-[18px] w-[30%]">00:00-07:00</div>-->
                    <div class="flex items-center w-[50%]">
                      <div class="text-[24px] mr-1">调节里程：</div>
                      <div class="text-[24px]">
                        {{
                          topRightDataTwo.adjustableMileage
                            ? topRightDataTwo.adjustableMileage + "kW/h"
                            : "--"
                        }}
                      </div>
                    </div>
                  </div>
                  <!--                  <div class="flex items-center py-3">-->
                  <!--                    <div class="text-[18px] w-[20%]">调节时段</div>-->
                  <!--                    <div class="text-[18px] w-[30%]">12:00-16:00</div>-->
                  <!--                    <div class="flex items-center w-[50%]">-->
                  <!--                      <div class="text-[24px] mr-1">47.74</div>-->
                  <!--                      <div class="text-[18px]">MWh</div>-->
                  <!--                    </div>-->
                  <!--                  </div>-->
                </div>
                <div class="flex-1 flex justify-center items-center">
                  <div
                    class="w-full h-[140px] flex flex-col justify-between relative p-2"
                  >
                    <div class="w-[60px] h-[60px] absolute right-0 top-0">
                      <IconifyIconOnline
                        icon="ant-design:project-filled"
                        color="#8ff2ff"
                        width="60"
                      />
                    </div>
                    <div class="absolute right-0 bottom-0">
                      <el-button type="primary" @click="showWhole"
                        >调控计划预览</el-button
                      >
                    </div>
                    <div>
                      <div class="flex text-[24px]">
                        <div class="mr-2">{{ selValue }}</div>
                        <div>日前调度计划</div>
                      </div>
                      <!--                      <div class="flex text-[14px]">-->
                      <!--                        <div>编号：</div>-->
                      <!--                        <div>220240903</div>-->
                      <!--                      </div>-->
                    </div>
                    <div>
                      <div class="flex text-[16px]">
                        <div>计划执行时间：</div>
                        <div>{{ selValue }} 00:00:00</div>
                      </div>
                      <div class="flex text-[16px]">
                        <div>计划执行策略：</div>
                        <div>均分</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <!--    <div class="w-full flex">-->
    <!--      &lt;!&ndash;      <div class="w-[10%] mr-[20px]">&ndash;&gt;-->
    <!--      &lt;!&ndash;        <el-card class="m-card my-bg">&ndash;&gt;-->
    <!--      &lt;!&ndash;          <div&ndash;&gt;-->
    <!--      &lt;!&ndash;            class="w-full h-[140px] flex flex-col justify-around relative p-2"&ndash;&gt;-->
    <!--      &lt;!&ndash;          >&ndash;&gt;-->
    <!--      &lt;!&ndash;            <div class="w-[60px] h-[60px] absolute right-0 top-0">&ndash;&gt;-->
    <!--      &lt;!&ndash;              <IconifyIconOnline&ndash;&gt;-->
    <!--      &lt;!&ndash;                icon="ph:calendar-dots-fill"&ndash;&gt;-->
    <!--      &lt;!&ndash;                color="#8ff2ff"&ndash;&gt;-->
    <!--      &lt;!&ndash;                width="60"&ndash;&gt;-->
    <!--      &lt;!&ndash;              />&ndash;&gt;-->
    <!--      &lt;!&ndash;            </div>&ndash;&gt;-->
    <!--      &lt;!&ndash;            <div class="flex items-baseline">&ndash;&gt;-->
    <!--      &lt;!&ndash;              <span class="text-[32px] font-bold mr-2">03</span>&ndash;&gt;-->
    <!--      &lt;!&ndash;              <span class="text-[18px]">日</span>&ndash;&gt;-->
    <!--      &lt;!&ndash;            </div>&ndash;&gt;-->
    <!--      &lt;!&ndash;            <div class="text-[18px]">2024年9月</div>&ndash;&gt;-->
    <!--      &lt;!&ndash;            <div class="text-[18px]">星期二</div>&ndash;&gt;-->
    <!--      &lt;!&ndash;          </div>&ndash;&gt;-->
    <!--      &lt;!&ndash;        </el-card>&ndash;&gt;-->
    <!--      &lt;!&ndash;      </div>&ndash;&gt;-->
    <!--      <div class="w-[25%] mr-[20px]">-->
    <!--        <el-card class="m-card my-bg">-->
    <!--          <div-->
    <!--            class="w-full h-[140px] flex flex-col justify-between relative p-2"-->
    <!--          >-->
    <!--            <div class="w-[60px] h-[60px] absolute right-0 top-0">-->
    <!--              <IconifyIconOnline-->
    <!--                icon="ant-design:project-filled"-->
    <!--                color="#8ff2ff"-->
    <!--                width="60"-->
    <!--              />-->
    <!--            </div>-->
    <!--            <div class="absolute right-0 bottom-0">-->
    <!--              <el-button type="primary" :icon="Plus" @click="showWhole"-->
    <!--                >整体协同调控</el-button-->
    <!--              >-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div class="flex text-[24px]">-->
    <!--                <div class="mr-2">09月03日</div>-->
    <!--                <div>日前调度计划</div>-->
    <!--              </div>-->
    <!--              <div class="flex text-[14px]">-->
    <!--                <div>编号：</div>-->
    <!--                <div>220240903</div>-->
    <!--              </div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div class="flex text-[16px]">-->
    <!--                <div>计划开始时间：</div>-->
    <!--                <div>2024-09-03 00:00:00</div>-->
    <!--              </div>-->
    <!--              <div class="flex text-[16px]">-->
    <!--                <div>计划开始时间：</div>-->
    <!--                <div>2024-09-03 00:00:00</div>-->
    <!--              </div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </el-card>-->
    <!--      </div>-->
    <!--      <div class="w-[25%] mr-[20px]">-->
    <!--        <el-card class="m-card my-bg">-->
    <!--          <div-->
    <!--            class="w-full h-[140px] flex flex-col justify-between relative p-2"-->
    <!--          >-->
    <!--            <div class="w-[60px] h-[60px] absolute right-0 top-0">-->
    <!--              <IconifyIconOnline-->
    <!--                icon="fluent-emoji-high-contrast:office-building"-->
    <!--                color="#8ff2ff"-->
    <!--                width="60"-->
    <!--              />-->
    <!--            </div>-->
    <!--            <div class="flex items-baseline">-->
    <!--              <div class="text-[18px]">计划参与用户数</div>-->
    <!--              <div class="text-[14px]">(家)</div>-->
    <!--            </div>-->
    <!--            <div class="text-[32px] font-bold">4</div>-->
    <!--          </div>-->
    <!--        </el-card>-->
    <!--      </div>-->
    <!--      <div class="w-[25%] mr-[20px]">-->
    <!--        <el-card class="m-card my-bg">-->
    <!--          <div-->
    <!--            class="w-full h-[140px] flex flex-col justify-between relative p-2"-->
    <!--          >-->
    <!--            <div class="w-[60px] h-[60px] absolute right-0 top-0">-->
    <!--              <IconifyIconOnline-->
    <!--                icon="mdi:book-time"-->
    <!--                color="#8ff2ff"-->
    <!--                width="60"-->
    <!--              />-->
    <!--            </div>-->
    <!--            <div class="flex items-baseline">-->
    <!--              <div class="text-[18px]">计划调节时长</div>-->
    <!--              <div class="text-[14px]">(h)</div>-->
    <!--            </div>-->
    <!--            <div class="text-[32px] font-bold">24</div>-->
    <!--          </div>-->
    <!--        </el-card>-->
    <!--      </div>-->
    <!--      <div class="w-[25%]">-->
    <!--        <el-card class="m-card my-bg">-->
    <!--          <div-->
    <!--            class="w-full h-[140px] flex flex-col justify-between relative p-2"-->
    <!--          >-->
    <!--            <div class="w-[60px] h-[60px] absolute right-0 top-0">-->
    <!--              <IconifyIconOnline-->
    <!--                icon="material-symbols:settings-timelapse"-->
    <!--                color="#8ff2ff"-->
    <!--                width="60"-->
    <!--              />-->
    <!--            </div>-->
    <!--            <div class="flex items-baseline">-->
    <!--              <div class="text-[18px]">计划总里程</div>-->
    <!--              <div class="text-[14px]">(兆瓦时)</div>-->
    <!--            </div>-->
    <!--            <div class="text-[32px] font-bold">-277.195</div>-->
    <!--          </div>-->
    <!--        </el-card>-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="w-full h-[500px] flex">
      <div class="w-[70%] h-full pr-[20px]">
        <el-card class="m-card w-full h-full">
          <div class="w-full h-full relative">
            <div
              :class="[
                activeData &&
                parseInt(activeData.status) >= 1 &&
                parseInt(activeData.status) < 4
                  ? 'bg-[rgba(143,242,255,1)] my-play2'
                  : 'bg-[rgba(143,242,255,.2)]'
              ]"
              class="line1 w-[5%] h-[4px] bg-[rgba(143,242,255,.2)] absolute left-[20%] top-[140px]"
            />
            <div
              :class="[
                activeData && parseInt(activeData.status) === 4
                  ? 'bg-[rgba(143,242,255,1)] my-play3'
                  : 'bg-[rgba(143,242,255,.2)]'
              ]"
              class="line2 w-[5%] h-[4px] bg-[rgba(143,242,255,.2)] absolute left-[20%] bottom-[140px]"
            />
            <div
              :class="[
                activeData &&
                parseInt(activeData.status) >= 2 &&
                parseInt(activeData.status) < 4
                  ? 'bg-[rgba(143,242,255,1)] my-play2'
                  : 'bg-[rgba(143,242,255,.2)]'
              ]"
              class="line3 w-[5%] h-[4px] bg-[rgba(143,242,255,.2)] absolute left-[55%] top-[60px]"
            />
            <div
              class="line4 w-[5%] h-[4px] bg-[rgba(143,242,255,.2)] absolute left-[55%] top-[100px]"
            />
            <div
              :class="[
                activeData && parseInt(activeData.status) === 4
                  ? 'bg-[rgba(143,242,255,1)] my-play3'
                  : 'bg-[rgba(143,242,255,.2)]'
              ]"
              class="line5 w-[5%] h-[4px] bg-[rgba(143,242,255,.2)] absolute left-[55%] top-[140px]"
            />
            <div
              class="line6 w-[4px] h-[100px] bg-[rgba(143,242,255,.2)] absolute left-[65%] top-[170px]"
            />
            <div
              :class="[
                activeData && parseInt(activeData.status) === 4
                  ? 'bg-[rgba(143,242,255,1)] my-play4'
                  : 'bg-[rgba(143,242,255,.2)]'
              ]"
              class="line7 w-[4px] h-[100px] bg-[rgba(143,242,255,.2)] absolute left-[62%] top-[170px]"
            />
            <div
              :class="[
                activeData &&
                parseInt(activeData.status) >= 3 &&
                parseInt(activeData.status) < 4
                  ? 'bg-[rgba(143,242,255,1)] my-play5'
                  : 'bg-[rgba(143,242,255,.2)]'
              ]"
              class="line8 w-[4px] h-[100px] bg-[rgba(143,242,255,.2)] absolute left-[68%] top-[170px]"
            />
            <div
              :class="[
                activeData &&
                parseInt(activeData.status) >= 3 &&
                parseInt(activeData.status) < 4
                  ? 'bg-[rgba(143,242,255,1)] my-play2'
                  : 'bg-[rgba(143,242,255,.2)]'
              ]"
              class="line9 w-[9%] h-[4px] bg-[rgba(143,242,255,.2)] absolute right-[calc(20%+20px)] bottom-[150px]"
            />
            <div
              class="line10 w-[9%] h-[4px] bg-[rgba(143,242,255,.2)] absolute right-[calc(20%+20px)] bottom-[110px]"
            />
            <div
              :class="[
                activeData && parseInt(activeData.status) === 4
                  ? 'bg-[rgba(143,242,255,1)] my-play3'
                  : 'bg-[rgba(143,242,255,.2)]'
              ]"
              class="line11 w-[9%] h-[4px] bg-[rgba(143,242,255,.2)] absolute right-[calc(20%+20px)] bottom-[70px]"
            />
            <el-card class="w-[20%] h-[360px] absolute top-[40px] my-bg2">
              <div class="w-full h-full relative flex flex-col justify-center">
                <div class="flex flex-col">
                  <div
                    class="border-b-[1px] border-dashed py-2 flex justify-between"
                  >
                    <div>指令编号：</div>
                    <div>
                      {{ activeData && activeData.no ? activeData.no : "-" }}
                    </div>
                  </div>
                </div>
                <div class="flex flex-col">
                  <div
                    class="border-b-[1px] border-dashed py-2 flex justify-between"
                  >
                    <div>目标功率：</div>
                    <div>
                      <span>{{
                        activeData && activeData.regulatoryAmount
                          ? activeData.regulatoryAmount
                          : "-"
                      }}</span>
                    </div>
                    <!--                    <div-->
                    <!--                      v-if="-->
                    <!--                        activeData &&-->
                    <!--                        activeData.regulatoryAmount &&-->
                    <!--                        activeData.regulatoryAmount.indexOf('+') > -1-->
                    <!--                      "-->
                    <!--                      class="flex items-center"-->
                    <!--                    >-->
                    <!--                      <IconifyIconOnline-->
                    <!--                        icon="iconamoon:trend-up"-->
                    <!--                        color="#fff"-->
                    <!--                        width="24"-->
                    <!--                      />-->
                    <!--                      <span>{{-->
                    <!--                        activeData.regulatoryAmount.split("+")[1]-->
                    <!--                      }}</span>-->
                    <!--                    </div>-->
                    <!--                    <div-->
                    <!--                      v-if="-->
                    <!--                        activeData &&-->
                    <!--                        activeData.regulatoryAmount &&-->
                    <!--                        activeData.regulatoryAmount.indexOf('-') > -1-->
                    <!--                      "-->
                    <!--                      class="flex items-center"-->
                    <!--                    >-->
                    <!--                      <IconifyIconOnline-->
                    <!--                        icon="iconamoon:trend-down"-->
                    <!--                        color="#fff"-->
                    <!--                        width="24"-->
                    <!--                      />-->
                    <!--                      <span>{{-->
                    <!--                        activeData.regulatoryAmount.split("-")[1]-->
                    <!--                      }}</span>-->
                    <!--                    </div>-->
                    <!--                    <div v-if="!activeData || !activeData.regulatoryAmount">-->
                    <!--                      - -->
                    <!--                    </div>-->
                  </div>
                </div>
                <div class="flex flex-col">
                  <div
                    class="border-b-[1px] py-2 border-dashed flex justify-between"
                  >
                    <div>指令类型：</div>
                    <div v-if="activeData">
                      {{ formatType(activeData.instructionType || 0) }}
                    </div>
                    <div v-else>-</div>
                  </div>
                </div>
                <div class="flex flex-col">
                  <div
                    class="border-b-[1px] py-2 border-dashed flex justify-between"
                  >
                    <div>预发时间：</div>
                    <div v-if="activeData">
                      {{ activeData.instructionSendTime }}
                    </div>
                    <div v-else>-</div>
                  </div>
                </div>
                <div class="flex flex-col">
                  <div
                    class="border-b-[1px] py-2 border-dashed flex justify-between"
                  >
                    <div>确认时间：</div>
                    <div v-if="activeData">
                      {{ activeData.instructionSendTime }}
                    </div>
                    <div v-else>-</div>
                  </div>
                </div>
                <div class="flex flex-col">
                  <div
                    class="border-b-[1px] py-2 border-dashed flex justify-between"
                  >
                    <div>响应时间：</div>
                    <div v-if="activeData">
                      {{ activeData.instructionRespTime }}
                    </div>
                    <div v-else>-</div>
                  </div>
                </div>
                <!--                <div class="absolute right-[-5px] top-[-5px] flex items-center">-->
                <!--                  <el-button type="primary" link>更多</el-button>-->
                <!--                  <el-icon size="14" color="#8FF2FF"><ArrowRight /></el-icon>-->
                <!--                </div>-->
              </div>
            </el-card>
            <el-card
              class="w-[30%] h-[400px] absolute top-[20px] left-[25%] my-bg2"
            >
              <div class="w-full h-full relative flex flex-col justify-center">
                <div class="w-full h-[60%] pt-[10px]">
                  <div class="flex flex-col">
                    <div
                      class="border-b-[1px] border-dashed py-2 flex justify-between"
                    >
                      <div>指令编号：</div>
                      <div>
                        {{ activeData && activeData.no ? activeData.no : "-" }}
                      </div>
                    </div>
                  </div>
                  <div class="flex flex-col">
                    <div
                      class="border-b-[1px] border-dashed py-2 flex justify-between"
                    >
                      <div>调整目标：</div>
                      <div>
                        <span>{{
                          activeData && activeData.vppTermName
                            ? activeData.vppTermName
                            : "-"
                        }}</span>
                      </div>
                      <!--                      <div-->
                      <!--                        v-if="-->
                      <!--                          activeData &&-->
                      <!--                          activeData.regulatoryAmount &&-->
                      <!--                          activeData.regulatoryAmount.indexOf('+') > -1-->
                      <!--                        "-->
                      <!--                        class="flex items-center"-->
                      <!--                      >-->
                      <!--                        <IconifyIconOnline-->
                      <!--                          icon="iconamoon:trend-up"-->
                      <!--                          color="#fff"-->
                      <!--                          width="24"-->
                      <!--                        />-->
                      <!--                        <span>{{-->
                      <!--                          activeData.regulatoryAmount.split("+")[1]-->
                      <!--                        }}</span>-->
                      <!--                      </div>-->
                      <!--                      <div-->
                      <!--                        v-if="-->
                      <!--                          activeData &&-->
                      <!--                          activeData.regulatoryAmount &&-->
                      <!--                          activeData.regulatoryAmount.indexOf('-') > -1-->
                      <!--                        "-->
                      <!--                        class="flex items-center"-->
                      <!--                      >-->
                      <!--                        <IconifyIconOnline-->
                      <!--                          icon="iconamoon:trend-down"-->
                      <!--                          color="#fff"-->
                      <!--                          width="24"-->
                      <!--                        />-->
                      <!--                        <span>{{-->
                      <!--                          activeData.regulatoryAmount.split("-")[1]-->
                      <!--                        }}</span>-->
                      <!--                      </div>-->
                      <!--                      <div v-if="!activeData || !activeData.regulatoryAmount">-->
                      <!--                        - -->
                      <!--                      </div>-->
                    </div>
                  </div>
                  <div class="flex flex-col">
                    <div
                      class="border-b-[1px] py-2 border-dashed flex justify-between"
                    >
                      <div>指令类型：</div>
                      <div v-if="activeData">
                        {{ formatType(activeData.instructionType || 0) }}
                      </div>
                      <div v-else>-</div>
                    </div>
                  </div>
                  <div class="flex flex-col">
                    <div
                      class="border-b-[1px] py-2 border-dashed flex justify-between"
                    >
                      <!-- 调节延续 0:是(手动调节结束后将转为自动调节) 1否(手动调节结束后将不在下发指令直至下次调节) -->
                      <div>调节延续：</div>
                      <div v-if="activeData">
                        {{ formatType2(activeData.regulatoryContinuity || 0) }}
                      </div>
                      <div v-else>-</div>
                    </div>
                  </div>
                </div>
                <div
                  class="w-full h-[40%] flex items-center my-play justify-around"
                >
                  <div class="flex flex-col justify-center items-center">
                    <div>
                      <IconifyIconOnline
                        icon="mingcute:airplay-fill"
                        color="#8ff2ff"
                        width="60"
                      />
                    </div>
                    <div class="text-[14px]">优化计算</div>
                  </div>
                  <div class="flex">
                    <div class="polygon polygon1" />
                    <div class="polygon polygon2" />
                    <div class="polygon polygon3" />
                  </div>
                  <div class="flex flex-col justify-center items-center">
                    <div>
                      <IconifyIconOnline
                        icon="ic:round-integration-instructions"
                        color="#8ff2ff"
                        width="60"
                      />
                    </div>
                    <div class="text-[14px]">协同指令</div>
                  </div>
                </div>
                <!--                <div class="absolute right-[-5px] top-[-5px] flex items-center">-->
                <!--                  <el-button type="primary" link>更多</el-button>-->
                <!--                  <el-icon size="14" color="#8FF2FF"><ArrowRight /></el-icon>-->
                <!--                </div>-->
              </div>
            </el-card>
            <div
              class="absolute w-[10%] h-[400px] flex flex-col justify-between top-[20px] left-[60%]"
            >
              <el-card class="w-full h-[150px] my-bg2">
                <div
                  class="w-full h-full flex justify-center items-center flex-col"
                >
                  <IconifyIconOnline
                    icon="ph:calendar-dots-fill"
                    color="#8ff2ff"
                    width="60"
                  />
                  <div>人机交互</div>
                </div>
              </el-card>
              <el-card class="w-full h-[150px] my-bg2">
                <div
                  class="w-full h-full flex justify-center items-center flex-col"
                >
                  <IconifyIconOnline
                    icon="mdi:razor-double-edge"
                    color="#8ff2ff"
                    width="60"
                  />
                  <div>边缘网关</div>
                </div>
              </el-card>
            </div>
            <el-card
              class="w-[20%] h-[360px] absolute top-[40px] right-[20px] my-bg2"
            >
              <div class="w-full h-full relative flex flex-col justify-center">
                <div class="flex flex-col">
                  <div
                    class="border-b-[1px] border-dashed py-2 flex justify-between"
                  >
                    <div>指令编号：</div>
                    <div>
                      {{ activeData && activeData.no ? activeData.no : "-" }}
                    </div>
                  </div>
                </div>
                <div class="flex flex-col">
                  <div
                    class="border-b-[1px] border-dashed py-2 flex justify-between"
                  >
                    <div>执行功率：</div>
                    <div>
                      <!--                      <span>{{ activeData && activeData.regulatoryAmount ? activeData.regulatoryAmount: '-' }}</span>-->
                      <span>-</span>
                    </div>
                    <!--                    <div-->
                    <!--                      v-if="-->
                    <!--                        activeData &&-->
                    <!--                        activeData.regulatoryAmount &&-->
                    <!--                        activeData.regulatoryAmount.indexOf('+') > -1-->
                    <!--                      "-->
                    <!--                      class="flex items-center"-->
                    <!--                    >-->
                    <!--                      <IconifyIconOnline-->
                    <!--                        icon="iconamoon:trend-up"-->
                    <!--                        color="#fff"-->
                    <!--                        width="24"-->
                    <!--                      />-->
                    <!--                      <span>{{-->
                    <!--                        activeData.regulatoryAmount.split("+")[1]-->
                    <!--                      }}</span>-->
                    <!--                    </div>-->
                    <!--                    <div-->
                    <!--                      v-if="-->
                    <!--                        activeData &&-->
                    <!--                        activeData.regulatoryAmount &&-->
                    <!--                        activeData.regulatoryAmount.indexOf('-') > -1-->
                    <!--                      "-->
                    <!--                      class="flex items-center"-->
                    <!--                    >-->
                    <!--                      <IconifyIconOnline-->
                    <!--                        icon="iconamoon:trend-down"-->
                    <!--                        color="#fff"-->
                    <!--                        width="24"-->
                    <!--                      />-->
                    <!--                      <span>{{-->
                    <!--                        activeData.regulatoryAmount.split("-")[1]-->
                    <!--                      }}</span>-->
                    <!--                    </div>-->
                    <!--                    <div v-if="!activeData || !activeData.regulatoryAmount">-->
                    <!--                      - -->
                    <!--                    </div>-->
                  </div>
                </div>
                <div class="flex flex-col">
                  <div
                    class="border-b-[1px] py-2 border-dashed flex justify-between"
                  >
                    <div>指令类型：</div>
                    <div v-if="activeData">
                      {{ formatType(activeData.instructionType || 0) }}
                    </div>
                    <div v-else>-</div>
                  </div>
                </div>
                <div class="flex flex-col">
                  <div
                    class="border-b-[1px] py-2 border-dashed flex justify-between"
                  >
                    <div>接收时间：</div>
                    <div v-if="activeData">
                      {{ activeData.instructionGenTime }}
                    </div>
                    <div v-else>-</div>
                  </div>
                </div>
                <div class="flex flex-col">
                  <div
                    class="border-b-[1px] py-2 border-dashed flex justify-between"
                  >
                    <div>确认时间：</div>
                    <div v-if="activeData">
                      {{ activeData.instructionSendTime }}
                    </div>
                    <div v-else>-</div>
                  </div>
                </div>
                <div class="flex flex-col">
                  <div
                    class="border-b-[1px] py-2 border-dashed flex justify-between"
                  >
                    <div>响应时间：</div>
                    <div v-if="activeData">
                      {{ activeData.instructionRespTime }}
                    </div>
                    <div v-else>-</div>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </el-card>
      </div>
      <div class="w-[30%] h-full">
        <el-card class="m-card w-full h-full">
          <div class="w-full h-full flex flex-col">
            <div class="w-full h-[50px] relative">
              <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="全部" name="first" />
                <el-tab-pane label="异常" name="second" />
              </el-tabs>
              <div class="absolute right-0 top-0">协同信息</div>
            </div>
            <div class="w-full h-[calc(100%-50px)]">
              <el-scrollbar height="100%">
                <el-timeline v-if="activeName === 'first'" class="py-4">
                  <el-timeline-item
                    v-for="item in centerData"
                    :key="item.id"
                    :timestamp="item.instructionSendTime"
                    placement="top"
                  >
                    <el-card
                      :class="{ 'card-active': item.active }"
                      @click="setActiveCardLine(item)"
                    >
                      <h4>指令编号：{{ item.no }}</h4>
                      <p>指令类型：{{ formatType(item.instructionType) }}</p>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
                <el-timeline v-if="activeName === 'second'" class="py-4">
                  <el-timeline-item
                    v-for="item in errData"
                    :key="item.id"
                    :timestamp="item.executeTime"
                    placement="top"
                  >
                    <el-card>
                      <p>信息：{{ item.msg }}</p>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </el-scrollbar>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="w-full flex-1 mt-[20px]">
      <el-card class="m-card w-full h-full">
        <div class="w-full h-full flex flex-col flex-shrink-0">
          <div class="w-full h-[60px] flex justify-between items-center">
            <div class="flex items-center">
              <el-input v-model="tSearch" placeholder="请输入内容" />
              <el-button
                type="primary"
                :icon="Search"
                class="ml-2"
                @click="search"
                >查询</el-button
              >
            </div>
            <!--            <div class="flex items-center">-->
            <!--              <el-button type="primary" :icon="Plus" @click="showWhole2"-->
            <!--                >调控</el-button-->
            <!--              >-->
            <!--              <el-button type="primary" :icon="Plus" @click="showWhole3"-->
            <!--                >重发</el-button-->
            <!--              >-->
            <!--            </div>-->
          </div>
          <div class="w-full flex-1 flex-shrink-0 overflow-hidden">
            <el-table :data="jterminalList" style="height: 100%">
              <el-table-column align="center" prop="name" label="终端名称" />
              <el-table-column
                align="center"
                prop="termMaker"
                label="终端厂家"
              />
              <el-table-column
                align="center"
                prop="termIpadd"
                label="终端IP地址"
              />
              <el-table-column
                align="center"
                prop="programVersion"
                label="终端程序版本"
              />
              <el-table-column
                align="center"
                prop="maxUpSpeed"
                label="上调速率"
              />
              <el-table-column
                align="center"
                prop="maxDownSpeed"
                label="下调速率"
              />
              <el-table-column
                align="center"
                prop="maxLoad"
                label="最大负荷(KW)"
              />
              <el-table-column
                align="center"
                prop="maxOutput"
                label="最大出力(KW)"
              />
              <el-table-column
                align="center"
                prop="maxUpCap"
                label="最大可上调容量(kW)"
              />
              <el-table-column
                align="center"
                prop="maxDownCap"
                label="最大可下调容量(kW)"
              />
              <!--              <el-table-column align="center" prop="createBy" label="创建人" />-->
              <!--              <el-table-column align="center" prop="9" label="历史">-->
              <!--                <template #default="scope">-->
              <!--                  <el-button type="primary" link @click="look(scope.row)"-->
              <!--                    >查看</el-button-->
              <!--                  >-->
              <!--                </template>-->
              <!--              </el-table-column>-->
            </el-table>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
@keyframes clippath2 {
  0% {
    background-color: rgb(39 162 162 / 100%);
  }

  100% {
    background-color: rgb(39 162 162 / 20%);
  }
}

@keyframes clippath {
  0%,
  100% {
    clip-path: inset(0 0 99% 0);
  }

  25% {
    clip-path: inset(0 99% 0 0);
  }

  50% {
    clip-path: inset(99% 0 0 0);
  }

  75% {
    clip-path: inset(0 0 0 99%);
  }
}

@keyframes linear-gradient-move {
  100% {
    background-position:
      32px 0,
      -32px 100%,
      0 -32px,
      100% 32px;
  }
}

@keyframes linear-gradient-move2 {
  100% {
    background-position:
      32px 0,
      -32px 100%,
      0 -32px,
      100% 32px;
  }
}

@keyframes linear-gradient-move3 {
  100% {
    background-position:
      32px 0,
      -32px 100%,
      0 -32px,
      100% 32px;
  }
}

.polygon {
  width: 40px;
  height: 40px;
  clip-path: polygon(50% 50%, 25% 0, 25% 100%);
  //clip-path: polygon(100% 50%, 75% 100%, 75% 0);
  background-color: rgb(39 162 162 / 20%);
  transition: background-color;
}

.polygon1 {
  animation: clippath2 1s infinite linear alternate-reverse;
  animation-delay: 1s;
}

.polygon2 {
  animation: clippath2 1s infinite linear alternate-reverse;
  animation-delay: 1s;
}

.polygon3 {
  animation: clippath2 1s infinite linear alternate-reverse;
  animation-delay: 1s;
}

//.my-play {
//  position: relative;
//
//  &::before {
//    position: absolute;
//    inset: 0;
//    content: "";
//    //border-radius: 1000px;
//    border: 2px solid #27a2a2;
//    //clip-path: inset(0 99% 0 0);
//    animation: clippath 3s infinite linear;
//  }
//}
.my-play {
  position: relative;

  &::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
      linear-gradient(90deg, #27a2a2 50%, transparent 0) repeat-x,
      linear-gradient(90deg, #27a2a2 50%, transparent 0) repeat-x,
      linear-gradient(0deg, #27a2a2 50%, transparent 0) repeat-y,
      linear-gradient(0deg, #27a2a2 50%, transparent 0) repeat-y;
    background-position:
      0 0,
      0 100%,
      0 0,
      100% 0;
    background-size:
      32px 2px,
      32px 2px,
      2px 32px,
      2px 32px;
    animation: linear-gradient-move 0.8s infinite linear;
  }
}

.my-play2 {
  &::before {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, #27a2a2 50%, transparent 0) repeat-x;
    background-position:
      0 0,
      0 100%,
      0 0,
      100% 0;
    background-size:
      32px 4px,
      32px 4px,
      4px 32px,
      4px 32px;
    animation: linear-gradient-move2 0.8s infinite linear;
  }
}

.my-play3 {
  &::before {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    z-index: 9999;
    content: "";
    background:
      none,
      linear-gradient(90deg, #27a2a2 50%, transparent 0) repeat-x,
      none,
      none;
    background-position:
      0 0,
      0 100%,
      0 0,
      100% 0;
    background-size:
      32px 4px,
      32px 4px,
      4px 32px,
      4px 32px;
    animation: linear-gradient-move3 0.8s infinite linear;
  }
}

.my-play4 {
  &::before {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    z-index: 9999;
    content: "";
    background:
      none,
      none,
      linear-gradient(0deg, #27a2a2 50%, transparent 0) repeat-y,
      none;
    background-position:
      0 0,
      0 100%,
      0 0,
      100% 0;
    background-size:
      32px 4px,
      32px 4px,
      4px 32px,
      4px 32px;
    animation: linear-gradient-move3 0.8s infinite linear;
  }
}

.my-play5 {
  &::before {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    z-index: 9999;
    content: "";
    background:
      none,
      none,
      none,
      linear-gradient(0deg, #27a2a2 50%, transparent 0) repeat-y;
    background-position:
      0 0,
      0 100%,
      0 0,
      100% 0;
    background-size:
      32px 4px,
      32px 4px,
      4px 32px,
      4px 32px;
    animation: linear-gradient-move3 0.8s infinite linear;
  }
}
//@keyframes clippath {
//  0%,
//  100% {
//    clip-path: inset(0 0 99% 0);
//  }
//
//  25% {
//    clip-path: inset(0 99% 0 0);
//  }
//
//  50% {
//    clip-path: inset(99% 0 0 0);
//  }
//
//  75% {
//    clip-path: inset(0 0 0 99%);
//  }
//}
:deep(.card-active) {
  border: 2px solid #fff !important;
}

:deep(.el-calendar-table .el-calendar-day) {
  padding: 0;
}

:deep(.m-card .el-card__body) {
  width: 100%;
  height: 100%;
}

:deep(.my-bg2 .el-card__body) {
  width: 100%;
  height: 100%;
  background-color: rgb(143 242 255 / 20%);
}

.my-btn {
  box-sizing: border-box;
  padding: 6px 20px;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #7f98f8;
  border-radius: 6px;
}

.jb {
  background-image: linear-gradient(to right, #7667fe, #6b95f5);
  border: none;
}

.my-shadow {
  box-shadow: 0 5px 12px -2px rgb(127 152 248 / 40%);
}

.border-bottom-f6 {
  border-bottom: 1px solid #f6f6f6;
}
</style>
